<template>
    <div >
        <div class="EBCTitle">EBC页面模块</div>
        <el-row :gutter="20" v-for="(item,index) in formData.ebcList" :key="index">
            <el-col :span="6">
                <template v-for="template in EbcPageTemplateList">
                    <div
                        class="grid-content bg-purple"
                        :key="template.ebcPageTemplateId"
                        v-if="template.ebcPageTemplateId === item.ebcPageTemplateId"
                    >
                        <div class="imgName">{{template.ebcTemplateName}}</div>
                        <el-image
                            :src="template.ebcTemplateImgUrl"
                            fit="contain"
                        ></el-image>
                        <div class="imgSIze"> {{template.imgSize}}</div>
                    </div>
                </template>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 7, maxRows: 10}"
                        placeholder="请输入内容"
                        v-model="item.note"
                        size="small"
                    ></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <el-form-item
                        label-width="0"
                        :prop="'ebcList.' + index + '.ebcTemplateReferenceImgUrl'"
                        :rules="{required: true, message:  '图片不能为空', trigger: 'blur'}"
                        v-if="isRouterAlive"
                    >
                        <vision-upload
                            :imageData="{pathType: 'REFER_EBC',typeId:'ebcTemplateReferenceImgUrl',removeUrl:true}"
                            :item="item"
                        ></vision-upload>
                    </el-form-item>
                </div>
                <div class="operating">
                    <el-form-item label-width="0">
                        <el-button
                            type="danger"
                            size="mini"
                            icon="el-icon-delete"
                            @click.passive="removeEbcList(item)"
                            circle
                        ></el-button>
                    </el-form-item>
                    <el-form-item label-width="0" v-if="formData.ebcList.length > 1 && index !== 0">
                        <el-button
                            type="success"
                            size="mini"
                            icon="el-icon-top"
                            circle
                            @click.passive="upRecord(formData.ebcList,index)"
                        ></el-button>
                    </el-form-item>
                    <el-form-item
                        label-width="0"
                        v-if="formData.ebcList.length > 1 && (index + 1) !== formData.ebcList.length"
                    >
                        <el-button
                            type="success"
                            size="mini"
                            icon="el-icon-bottom"
                            circle
                            @click.passive="downRecord(formData.ebcList,index)"
                        ></el-button>
                    </el-form-item>
                </div>
            </el-col>
        </el-row>
        <vision-selectTemplate
            @addEbcList="addEbcList"
            ref="selectTemplate"
            :EbcPageTemplateList="EbcPageTemplateList"
        ></vision-selectTemplate>
        <el-form-item label-width="0" :class="formData.ebcList.length  === 0?'border':''">
            <el-button
                type="primary"
                size="mini"
                icon="el-icon-circle-plus-outline"
                @click.prevent="$refs.selectTemplate.show()"
            >新增EBC</el-button>
        </el-form-item> 
    </div>
</template>
<script>
const ERR_OK = 200;
import visionUpload from "./vision-upload";
import visionSelectTemplate from "./vision-selectTemplate";
export default {
    props: {
        formData: {}
    },
    data() {
        return {
            EbcPageTemplateList: [],
            isRouterAlive: true,
        };
    },
    created() {
        this.getEbcPageTemplateList();
    },
    methods: {
        // 新增ebcList
        addEbcList(item) {
            this.formData.ebcList.push({
                ebcPageTemplateId: item.ebcPageTemplateId,
                ebcTemplateReferenceImgUrl: "",
                note: "",
                visionDemandId: this.formData.visionDemandId
                    ? this.formData.visionDemandId
                    : "" //编辑需要添加
            });
        },
        //删除ebcList
        removeEbcList(item) {
            var index = this.formData.ebcList.indexOf(item);
            if (index !== -1) {
                this.formData.ebcList.splice(index, 1);
                this.IsRouterAlive()
            }
        },
        IsRouterAlive() {
            this.isRouterAlive = false;
            this.$nextTick(function() {
                this.isRouterAlive = true;
            });
        },
        swapItems(arr, index1, index2) {
            this.IsRouterAlive()
            arr[index1] = arr.splice(index2, 1, arr[index1])[0];
            return arr;
        },
        upRecord(arr, $index) {
            if ($index == 0) {
                return;
            }
            this.swapItems(arr, $index, $index - 1);
        },
        downRecord(arr, $index) {
            if ($index == arr.length - 1) {
                return;
            }
            this.swapItems(arr, $index, $index + 1);
        },
        // 获取EBC模板列表
        getEbcPageTemplateList() {
            this.$ajax
                .get(
                    this.GLOBAL.oaVisionDemand +
                        "/visionDemandEbcTemplate/getEbcTemplateList"
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.EbcPageTemplateList = res.data.data;
                    }
                });
        }
    },
    components: {
        visionUpload,
        visionSelectTemplate
    }
};
</script>
<style lang="stylus" scoped>
.EBCTitle {
    font-size: 16px;
    padding: 15px 0;
    color: #333;
    font-weight: bold;
}

.el-row {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    vertical-align: top;
    padding-right: 40px;

    .bg-purple {
        background: #d3dce6;
        padding: 10px;
        height: 100%;
        box-sizing: border-box;

        .imgName {
            font-size: 14px;
            padding: 5px;
            background: #aab6c3;
        }

        .imgSIze {
            font-size: 14px;
            padding: 0;
            text-align: center;
            color: #333333;
        }
    }

    .el-form-item {
        margin-bottom: 0;
    }

    .grid-content {
        border-radius: 4px;
    }

    .operating {
        position: absolute;
        right: 10px;
        top: 0;
        text-align: center;

        .el-form-item {
            margin: 0px 0;
        }
    }
}

.border {
    padding: 50px 0;
    text-align: center;
    border: 2px dashed #cccccc;
}
</style>